<!--
author: 何其沆(pooky)
desc: Existing Clients
date: 2021-11-12
-->
<template>
  <div class="existing-clients">
    <search @search="handleSearch" @reset="handleReset">
      <div style="display: flex">
        <SearchInput searchText="Client">
          <a-input v-model:value="client" />
        </SearchInput>
        <SearchInput searchText="Client Activity">
          <a-select
            v-model:value="clientActivity"
            show-search
            option-filter-prop="label"
            option-label-prop="label"
            :get-popup-container="triggerNode => triggerNode.parentNode"
          >
            <a-select-option v-for="item in state.clientActivityList" :key="item.id" :label="item.activeName">
              {{ item.activeName }}
            </a-select-option>
          </a-select>
        </SearchInput>
        <SearchInput searchText="Blacklist">
          <a-select
            v-model:value="blacklist"
            show-search
            option-filter-prop="label"
            option-label-prop="label"
            :get-popup-container="triggerNode => triggerNode.parentNode"
          >
            <a-select-option v-for="item in state.blacklist" :key="item.id" :label="item.blacklistName">
              {{ item.blacklistName }}
            </a-select-option>
          </a-select>
        </SearchInput>
        <SearchInput searchText="Type">
          <a-select
            v-model:value="type"
            show-search
            option-filter-prop="label"
            option-label-prop="label"
            :get-popup-container="triggerNode => triggerNode.parentNode"
          >
            <a-select-option v-for="item in state.typeList" :key="item.value" :label="item.text">
              {{ item.text }}
            </a-select-option>
          </a-select>
        </SearchInput>
        <e-icon
          v-if="isOpen"
          type="collapsing1"
          color="#e1e6f0"
          font-size="14px"
          style="
            cursor: pointer;
            width: 32px;
            height: 32px;
            display: flex;
            justify-content: center;
            align-items: center;
            margin-top: 28px;
            border: 1px solid #e1e6f0;
            border-radius: 2px;
          "
          @click="isOpen = false"
        />
        <e-icon
          v-else
          type="unfold2"
          color="#e1e6f0"
          font-size="14px"
          style="
            cursor: pointer;
            width: 32px;
            height: 32px;
            display: flex;
            justify-content: center;
            align-items: center;
            margin-top: 28px;
            border: 1px solid #e1e6f0;
            border-radius: 2px;
          "
          @click="isOpen = true"
        />
      </div>
      <div v-if="isOpen" style="display: flex; margin-top: 16px">
        <SearchInput searchText="Organization">
          <a-select
            v-model:value="organization"
            show-search
            option-filter-prop="label"
            option-label-prop="label"
            :get-popup-container="triggerNode => triggerNode.parentNode"
          >
            <a-select-option v-for="item in state.organizationList" :key="item.value" :label="item.text">
              {{ item.text }}
            </a-select-option>
          </a-select>
        </SearchInput>
        <SearchInput searchText="Business Area">
          <a-select
            v-model:value="businessArea"
            show-search
            option-filter-prop="label"
            option-label-prop="label"
            :get-popup-container="triggerNode => triggerNode.parentNode"
          >
            <a-select-option v-for="item in state.businessAreaList" :key="item.value" :label="item.text">
              {{ item.text }}
            </a-select-option>
          </a-select>
        </SearchInput>
        <SearchInput searchText="Country/Region">
          <a-select
            v-model:value="countryRegion"
            show-search
            option-filter-prop="label"
            option-label-prop="label"
            :get-popup-container="triggerNode => triggerNode.parentNode"
          >
            <a-select-option :value="0" label="All"> All </a-select-option>
            <a-select-option v-for="item in state.countriesOrRegionsList" :key="item.value" :label="item.text">
              <a-space><e-flag :code="item.value" size="small" />{{ item.text }}</a-space>
            </a-select-option>
          </a-select>
        </SearchInput>
        <!--
        <SearchInput searchText="Client Industry">
          <a-select
            v-model:value="saleBUID"
            show-search
            option-filter-prop="label"
            :get-popup-container="triggerNode => triggerNode.parentNode"
          >
            <a-select-option :key="0" label="All"> All </a-select-option>
            <a-select-option v-for="item in dict.salesBUs" :key="item.value" :label="item.text">
              {{ item.text }}
            </a-select-option>
          </a-select>
        </SearchInput>
        -->
      </div>
    </search>
    <e-container style="margin-top: 24px">
      <a-spin :spinning="loading" tip="Loading...">
        <a-table
          :columns="columns"
          :data-source="data"
          class="ant-table-striped"
          :pagination="false"
          :row-class-name="(_record, index) => (index % 2 === 0 ? 'table-striped' : null)"
          @change="sortChange"
        >
          <template #bodyCell="{ column, record }">
            <template v-if="column.key === 'tags'">
              <span v-for="(item, index) in record.tags" :key="index">
                <e-tag :item="item" />
              </span>
            </template>
            <template v-else-if="column.key === 'fullName'">
              <a @click="clickName(record.id)">{{ record['fullName'] }}</a>
            </template>
            <template v-else-if="column.key === 'countryID'">
              <e-country-or-region :code="record.countryID" />
            </template>
          </template>
          <template #emptyText>
            <e-empty>
              <template #description>
                <div>No Data</div>
              </template>
            </e-empty>
          </template>
        </a-table>
      </a-spin>
      <div v-if="total > 0" class="pagination">
        <a-pagination
          v-model:current="current"
          v-model:pageSize="pageSize"
          :total="total"
          show-less-items
          :show-size-changer="false"
          @change="changeSize"
        />
      </div>
    </e-container>
  </div>
</template>
<script setup>
import { ref, reactive, onMounted, computed } from 'vue'
import { useStore } from 'vuex'
import { useRouter } from 'vue-router'
import EContainer from '@/components/EContainer.vue'
import EIcon from '@/components/EIcon.vue'
import EEmpty from '@/components/EEmpty.vue'
import ETag from '@/components/ETag.vue'
import EFlag from '@/components/EFlag.vue'
import ECountryOrRegion from '@/components/ECountryOrRegion.vue'
import Search from '../../components/Search.vue'
import SearchInput from '../../components/SearchInput.vue'
import pageColumns from '@/assets/script/page_columns.js'
import { useDictNullValue } from '@/hooks/useDictNullValue.js'
const router = useRouter()
const existingClients = pageColumns.existingClients
const columns = reactive(existingClients)
const store = useStore()
const isOpen = ref(true)
const current = ref(1)
const pageSize = ref(10)
const loading = ref(false)
const client = ref('')
const clientActivity = ref(0)
const blacklist = ref(0)
const type = ref(0)
const organization = ref(0)
const businessArea = ref(0)
const countryRegion = ref(0)
const saleBUID = ref(0)
const sort = ref('')
const order = ref('')
const state = reactive({
  clientActivityList: [
    { id: 0, activeName: 'All' },
    { id: 1, activeName: 'Active' },
    { id: 2, activeName: 'Inactive' }
  ],
  blacklist: [
    { id: 0, blacklistName: 'All' },
    { id: 1, blacklistName: 'Yes' },
    { id: 2, blacklistName: 'No' }
  ],
  typeList: [{ value: 0, text: 'All' }],
  organizationList: [{ value: 0, text: 'All' }],
  businessAreaList: [{ value: 0, text: 'All' }],
  countriesOrRegionsList: []
})
const dict = ref(computed(() => store.state.dict))
store.dispatch('dict/getOrganizations').then(() => {
  if (dict.value.organizations.length > 0) {
    state.organizationList = [...state.organizationList, ...dict.value.organizations]
  }
})
store.dispatch('dict/getCountriesOrRegions').then(() => {
  if (dict.value.countriesOrRegions.length > 0) {
    const arr = [...state.countriesOrRegionsList, ...dict.value.countriesOrRegions]
    state.countriesOrRegionsList = arr.sort((a, b) => {
      return a.text.localeCompare(b.text)
    })
  }
})
store.dispatch('dict/getClientTypes').then(() => {
  if (dict.value.clientTypes.length > 0) {
    state.typeList = [...state.typeList, ...dict.value.clientTypes]
  }
})
store.dispatch('dict/getBusinessAreas').then(() => {
  if (dict.value.businessAreas.length > 0) {
    state.businessAreaList = [...state.businessAreaList, ...dict.value.businessAreas]
  }
})
store.dispatch('dict/getSalesBUs')
/**
 * 表格数据
 * @type {ComputedRef<*>}
 */
const data = computed(() => store.state.ec.tableList.data)
/**
 * 总条数
 * @type {ComputedRef<*>}
 */
const total = computed(() => store.state.ec.tableList.total)
/**
 * 获取列表数据
 * @returns {Promise<void>}
 */
const getList = async () => {
  loading.value = true
  await store
    .dispatch('setTableList', {
      clientName: client.value.trim(),
      clintActive: clientActivity.value,
      blackList: blacklist.value,
      type: type.value,
      organization: organization.value,
      businessDirection: businessArea.value,
      country: countryRegion.value,
      saleBUID: saleBUID.value,
      page: {
        pageRows: pageSize.value,
        pageIndex: current.value,
        sort: sort.value,
        order: order.value,
        total: 0
      }
    })
    .finally(() => {
      setTimeout(() => {
        loading.value = false
      }, 30)
    })
}
/**
 * 搜索
 */
const handleSearch = () => {
  current.value = 1
  getList()
}
/**
 * 重置
 */
const handleReset = () => {
  client.value = ''
  clientActivity.value = 0
  blacklist.value = 0
  type.value = 0
  organization.value = 0
  businessArea.value = 0
  countryRegion.value = 0
  handleSearch()
}
/**
 * 修改页码
 * @param cur
 */
const changeSize = cur => {
  current.value = cur
  getList()
}
/**
 * 点击跳转
 * @param val
 */
const clickName = val => {
  window.open(router.resolve({ name: 'Client Detail', params: { id: val } }).href, '_BLANK')
}
/**
 * 排序
 * @param p
 * @param f
 * @param s
 */
const sortChange = (p, f, s) => {
  if (s.order === 'ascend') {
    order.value = 'asc'
    sort.value = s.columnKey
  } else if (s.order === 'descend') {
    order.value = 'desc'
    sort.value = s.columnKey
  } else {
    order.value = ''
    sort.value = ''
  }
  getList()
}
/**
 * 初始化
 */
onMounted(() => {
  getList()
})
</script>
<style scoped lang="less">
@import '@/assets/style/reset_table';
@import '@/assets/style/reset_form';
</style>
<route lang="yaml">
name: Existing Clients
path: /existing-clients/
</route>
